let vm = new Vue({
    el: "#app",
    // 修改vue读取变量的属性
    delimiters: [ "[[", "]]" ],

    data: {
        username: "",
        password: "",
        password2: "",
        mobile: "",
        allow: "",
        image_url: "",    // 图片请求后端的地址
        uuid: "",
        image_code: "",
        sms_code_tip: "获取短信验证码",
        sms_code: "",

        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,
        send_flag: false,
        error_sms_code: false,

        error_name_message: "",
        error_mobile_message: "",
        error_image_code_message: "",
        error_sms_code_message: "",


    },
        // 页面加载完成获取验证码
    mounted(){
        this.generate_image_code()
    },
    // 事件函数
    methods:{
        // 获取短信验证码
        send_sms_code(){
            if (this.send_flag == true){
                return
            }
            this.send_flag = true;
            this.check_username();
            this.check_password();
            this.check_mobile();
            this.check_image_code();
            if (this.error_mobile == true || this.error_image_code == true
                || this.error_name == true || this.error_password == true){
                this.send_flag = false;
                return
            }
            let url = "/sms_codes/" + this.mobile + "/?image_code=" + this.image_code + "&uuid=" + this.uuid;
          axios.get(url, {
              responseType: "json"
          })
              .then(response => {
                  // 请求成功
                  if (response.data.code == "0"){
                      let num = 60;
                      let t = setInterval(() => { //倒计时结束
                          if (num == 1){
                              clearInterval(t);
                              this.sms_code_tip = "获取短信验证码";
                              this.generate_image_code();
                              this.send_flag = false;

                          }else { // 正在倒计时
                              num -= 1;
                              this.sms_code_tip = num + "秒"
                          }

                      }, 1000)

                  }else {
                      if (response.data.code == "4001"){
                          this.error_image_code_message = response.data.errmsg;
                          this.error_image_code = true
                      }else {
                          if (response.data.code == "4002"){  // 手机号频繁发送验证码
                              this.error_sms_code_message = response.data.errmsg;
                              this.error_sms_code = true
                          }
                      }
                      this.send_flag = false;
                  }
              })
              .catch(error => {
                    console.log(error);
                    this.send_flag = false;

              })
        },

        // 生成图形验证码
         generate_image_code(){
             // 生成uuid
             this.uuid = generateUUID();
             this.image_url = "/image_codes/" + this.uuid + "/"
         },
        // 用户名
        check_username() {
        let re = /^[a-zA-Z0-9-_]{5,20}$/;
            if (re.test(this.username)){
            this.error_name = false;
            }else {
                this.error_name_message = "请输入5-20个字符";
                this.error_name = true;
            }
            // 判断用户名是否存在
            if (this.error_name == false){
                let url = '/usernames/' + this.username + '/count/';
                axios.get(url,{
                    responseType: "json"

                })
                    .then(response => {
                    if (response.data.count == 1){
                        // 用户名存在
                        this.error_name_message = "用户名存在";
                        this.error_name = true
                    }else {
                        this.error_name = false
                    }
                })
                    .catch(error => {
                        console.log(error)
                    })


            }
        },

        // 密码
        check_password() {
            let re = /^[a-zA-Z0-9]{8,20}$/;
            if (re.test(this.password)){
                this.error_password = false;

            }else {
                this.error_password = true;
            }
        },

        // 校验密码
        check_password2() {
            if (this.password == this.password2){
                this.error_password2 = false;
            }else {
                this.error_password2 = true;
            }
        },

        //校验手机号
        check_mobile() {
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)){
                this.error_mobile = false;
            }else {
                this.error_mobile_message = "请输入正确的手机号码";
                this.error_mobile = true;
            }
            // 校验手机号
            if (this.error_mobile == false){
                let url = '/mobiles/' + this.mobile + '/count/';

                axios.get(url, {
                    responseType: "json"
                })
                    .then(response => {
                        if (response.data.count == 1){
                            this.error_mobile_message = "手机号已存在";
                            this.error_mobile = true
                        }else {
                            this.error_mobile = false
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        },

        // 校验图形验证码
        check_image_code(){
             if (this.image_code.length != 4){
                 this.error_image_code_message = "请输入图形验证码";
                 this.error_image_code = true;
             }else {
                 this.error_image_code = false;
             }
        },
        // 校验短信验证码
        check_sms_code(){
            if (this.sms_code.length != 6){
                this.error_sms_code_message = "请填写短信验证码";
                this.error_sms_code = true;
            }else {
                this.error_sms_code = false;
            }
        },




        //是否勾选协议
        check_allow() {
            if (!this.allow){
                this.error_allow = true;
            }else {
                this.error_allow = false;
            }
        },

        // 监听表单提交事件
        on_submit() {
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_image_code();
            this.check_sms_code();
            this.check_allow();

            // 校验全部数据
            if (this.error_name == true || this.error_password == true ||
            this.error_password2 == true || this.error_mobile == true ||
            this.error_sms_code == true || this.error_allow == true){
                window.event.returnValue = false;
            }
        },
    }

});